<template>
<div>
    <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false"  top="90px">
        <el-form class="" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '110px' : '110px'">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="渔家乐名称" prop="name">
                        <el-input v-model="dataForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商户类型" prop="merchantType">
                        <ren-select v-model="dataForm.merchantType" dict-type="MerchantType" placeholder="请选择商户类型" style="width:100%"></ren-select>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="联系人" prop="linkName">
                        <el-input v-model="dataForm.linkName">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话" prop="phone">
                        <el-input v-model="dataForm.phone">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="项目名称" prop="activity">
                        <el-input v-model="dataForm.activity">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="营业时间" prop="useTime">
                        <el-input v-model="dataForm.useTime">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="位置信息" prop="address">
                        <el-input type="centent" v-model="dataForm.address">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经纬度" prop="lonandLat">
                        <el-input v-model="dataForm.lonandLat" style="width:60%;margin-right:10px"></el-input>
                        <el-button type="primary" size="mini" @click="mapCli()">地图选点</el-button>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                <el-form-item label="经度" prop="longitude">
                    <el-input v-model="dataForm.longitude">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="纬度" prop="latitude">
                    <el-input v-model="dataForm.latitude">
                    </el-input>
                </el-form-item>
            </el-col> -->
                <el-col :span="24">
                    <el-form-item label="资质" prop="">
                        <el-upload :action="url" :file-list="fileList" :limit="10" :before-upload="beforeUploadHandle" list-type="picture-card" :on-success="successHandle" :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- <mapdiv style="width:calc(100% - 20px);margin-left:20px"></mapdiv> -->
        </el-form>
        <template slot="footer">
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{
            $t("confirm")
          }}</el-button>
        </template>
    </el-dialog>
    <el-dialog :visible.sync="mapShow" title="地图选点" top="70px">
        <mapdiv ref="mapDiv" style="width:96%;margin:0 auto 20px" :longitude="dataForm.longitude" :latitude="dataForm.latitude" @getPos="getPosVal($event)">
        </mapdiv>
    </el-dialog>
</div>
</template>

<script>
import debounce from "lodash/debounce";
import Cookies from "js-cookie";
import mapdiv from "../../data/map-data/map2";
export default {
    data() {
        return {
            mapShow: false,
            visible: false,
            url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
            fileList: [],
            dataForm: {
                merchantType: '',
                activity: "",
                address: "",
                id: '',
                name: "",
                linkName:'',
                phone: "",
                aptitude: "",
                latitude: 0,
                lonandLat: '',
                longitude: 0,
                useTime: "",
                picList: [],
            },
        };
    },
    components: {
        mapdiv
    },
    computed: {
        dataRule() {
            return {
                head: [{
                    required: true,
                    message: this.$t("validate.required"),
                    trigger: "blur",
                }, ],

            };
        },
    },
    methods: {
        mapCli() {
            this.mapShow = true;
            this.$nextTick(() => {
                this.$refs.mapDiv.initMap();
            })
        },
        getPosVal(obj) {
            this.mapShow = false;
            this.dataForm.latitude = obj.lat;
            this.dataForm.longitude = obj.lon;
            this.dataForm.lonandLat = obj.lon + ',' + obj.lat;
        },
        handleRemove(file, fileList) {
            this.dataForm.picList = fileList.map((item) => {
                return item.url;
            });
        },
        // 上传之前
        beforeUploadHandle(file) {
            if (
                file.type !== "image/jpg" &&
                file.type !== "image/jpeg" &&
                file.type !== "image/png" &&
                file.type !== "image/gif"
            ) {
                this.$message.error(this.$t("upload.tip", {
                    format: "jpg、png、gif"
                }));
                return false;
            }
        },
        // 上传成功
        successHandle(res, file, fileList) {
            if (res.code !== 0) {
                return this.$message.error(res.msg);
            }
            this.fileList.unshift({
                name: "",
                url: res.data.url,
            });
            this.dataForm.picList = this.fileList.map((item) => {
                return item.url;
            });
        },
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.dataForm.picList = [];
                this.dataForm.pic = "";
                this.fileList = [];
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        //获取信息
        getInfo() {
            console.log(this.dataForm.id)
            this.$http
                .get("/scenic/fisherman/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    this.dataForm.lonandLat = this.dataForm.longitude + ',' + this.dataForm.latitude;
                    let imgArr = this.dataForm.aptitude.split(",");
                    imgArr.filter((item) => {
                        this.fileList.push({
                            url: item
                        })
                    })

                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.dataForm.aptitude = this.dataForm.picList.join(',');
                    this.$http[!this.dataForm.id ? 'post' : 'put'](
                            "/scenic/fisherman",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>

<style lang="scss" scoped>
h3 {
    padding: 30px 0 15px;
    width: 94%;
    margin: 0 auto 30px;
    border-bottom: 1px solid #ddd;
    color: #303133;
    font-size: 22px;
    overflow: hidden;
}

.rooms .item {
    display: inline-block;
    margin-right: 15px;
    position: relative;

    .el-icon-error {
        position: absolute;
        right: 6px;
        top: -6px;
        font-size: 20px;
        color: #dd0606;
    }
}
</style>
